<!-- 房间号特殊配置 -->
<template>
	<a-modal v-bind="options">
		<a-form :model="config" :label-col="{span: 6}">
			<a-form-item name="num">
				<template #label>
					房间号去
					<a-tooltip :overlay-style="{'max-width': 'none'}">
						<question-circle-outlined />
						<template #title>
							内部去【X】，即房间号生成时数字部分是【X】，不生成该房间号；
							<br />
							尾部去【X】，即房间号生成时数字部分尾部是【X】，不生成该房间号；
							<br />
							区分：内部去【4】，不可生成41号；尾部去【4】，可生成41号。
						</template>
					</a-tooltip>
				</template>
				<div class="display-flex">
					<a-input-number v-model:value="config.num" placeholder="请输入数值0~9，回车添加" :min="0" :max="9" :precision="0" :step="1" @press-enter="addNumToRule" />
					<a-button type="link" :disabled="config.num === null" @click="addNumToRule">
						<plus-circle-outlined />
					</a-button>
				</div>
			</a-form-item>
			<a-form-item v-for="rule in config.rules" :key="rule.num">
				<template #label>房间号去{{ rule.num }}</template>
				<a-form-item-rest>
					<a-row type="flex" align="middle" justify="space-between">
						<a-radio-group v-model:value="rule.type">
							<a-radio :value="1">内部去</a-radio>
							<a-radio :value="2">尾部去</a-radio>
						</a-radio-group>
						<a-button type="link" danger @click="removeNum(rule.num)">删除</a-button>
					</a-row>
				</a-form-item-rest>
			</a-form-item>
		</a-form>

		<template #footer>
			<a-button @click="submit(true)">设为默认配置</a-button>
			<a-button @click="submit(false)" type="primary">仅应用该楼栋</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, watchEffect} from 'vue'
	import {message} from 'ant-design-vue'
	import XEUtils from 'xe-utils'
	import {PlusCircleOutlined, QuestionCircleOutlined} from '@ant-design/icons-vue'
	import {Building} from '@/interface/community'

	const props = defineProps<{
		visible: boolean
		building: Building
	}>()

	const emits = defineEmits(['update:visible', 'submit'])

	const options = reactive({
		width: '500px',
		title: '房间号特殊配置',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		bodyStyle: {
			padding: '16px 16px 0'
		},
		onCancel() {
			emits('update:visible', false)
		}
	})

	const config = ref<any>({
		num: null,
		rules: []
	})

	watchEffect(() => {
		if (props.visible) {
			config.value.rules = XEUtils.clone(props.building.noExcludeRules, true)
		}
	})

	const removeNum = (num: number) => {
		XEUtils.remove(config.value.rules, item => item.num === num)
	}

	const addNumToRule = () => {
		const rules = config.value.rules

		if (config.value.num === null) {
			return message.warn('请输入数值')
		}

		if (rules.some(o => o.num === config.value.num)) {
			return message.warn(`数值【${config.value.num}】已存在，请更换`)
		}

		rules.push({
			type: 1,
			num: config.value.num
		})

		config.value.num = null
		config.value.rules = XEUtils.sortBy(rules, 'num')
	}

	const submit = (isDefault: boolean) => {
		Object.assign(props.building, {
			noExcludeRules: config.value.rules
		})
		emits('submit', isDefault)
		options.onCancel()
	}
</script>

<style scoped lang="less"></style>
